<template>
    <qh-page-view :showNavbar="false" bgColor="#fff">
        <view class="fixed-header" :style="headerStyle">
            <uni-status-bar></uni-status-bar>
            <view class="search-box flex-cn">
                <view class="navbar-left flex-cn" style="flex: 1" @click="cancel">
                    <view style="width: 100rpx;font-size: 52rpx; text-align: center; color: #fff"
                        class="qh-rt-single feiIconfont icon-shouye1" :class="{ 'icon-dark': isScrolled }">
                    </view>
                </view>

                <view class="header-title" style="color: #fff; font-weight: 600" :class="{ 'text-dark': isScrolled }">
                    会员注册
                </view>
                <view style="width: 320rpx; flex: 1"></view>
            </view>
        </view>

        <view class="login-page">
            <view class="formData-container" :class="{ 'hidden': !isFormVisible }">
                <view class="login-formData">
                    <!-- <view class="formData-item avatar-item">
                        <text class="label">微信头像</text>
                        <view class="avatar-wrapper">
                            <image class="avatar" :src="formData.avatar" v-if="formData.avatar" mode="aspectFill">
                            </image>

                            <view v-else style="
                                font-size: 80rpx;    
                                    color: gray;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;    
                          " class="avatar qh-rt-single qh-rt-yuangong qh-user-head-img__empty-icon"></view>

                            <button v-if="canIUse" class="formData-list-button" open-type="chooseAvatar"
                                @chooseavatar="chooseAvatar"></button>
                        </view>
                    </view> -->
             

                    <view class="formData-item nickname-item formData-item-border">
                        <view class="input-with-button">
                            <text class="label">微信昵称</text>
                            <input type="nickname" v-model="formData.nickname" placeholder="请输入昵称" @change="onNicknameChange" />
                        </view>
                    </view>
                    
                    <!-- <view class="formData-item nickname-item">
                        <text class="label">姓名</text>
                        <input type="text" v-model="formData.nickname" placeholder="姓名" />
                    </view> -->

                    <view class="formData-item nickname-item formData-item-border">
                        <view class="input-with-button">
                            <text class="label">手机号</text>
                            <input type="number" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />

                            <button class="auth-button" open-type="getPhoneNumber"
                                @getphonenumber="getWxPhoneNumber">点击授权</button>
                        </view>
                    </view>
                    <view class="formData-item nickname-item">
                    </view>
                

                    <!-- <view class="formData-item verification-item">
                        <text class="label">验证码</text>
                        <input type="number" v-model="formData.verificationCode" placeholder="请输入验证码" maxlength="6" />
                        <text class="verify-btn" @tap="getVerificationCode" :disabled="counting > 0">
                                {{ counting > 0 ? `${counting}s后重试` : '获取验证码' }}
                            </text>
                    </view> -->

                    <!-- <view class="formData-item verification-item">
                        <text class="label">新密码</text>
                        <input type="password" v-model="formData.password" maxlength="6" placeholder="请输入密码" />
                    </view>

                    <view class="formData-item verification-item">
                        <text class="label">确认密码</text>
                        <input type="password" v-model="formData.confirmationCode" maxlength="6" placeholder="请再次输入密码" />
                    </view> -->

                </view>
            </view>
            <view class="button-group">
                <!-- <button class="btn cancel" @tap="cancel">再考虑下</button> -->
                <button class="btn submit" @tap="submitForm">注册会员</button>
            </view>
        </view>

    </qh-page-view>
</template>

<script>
import {
    upload
} from "@/request/index.js";
export default {
    data() {
        return {
            formData: {
                name:'',
                avatar: '',
                nickname: '',
                phone: '',
                verificationCode: '',
                password: '',
                confirmationCode: ''
            },
            counting: 0,
            timer: null,
            isFormVisible: true,
            isTop: true,
            changeAvatar: false,
            // #ifdef MP-WEIXIN
            canIUse: wx.canIUse('button.open-type.chooseAvatar'), //选择头像是否可用
            // #endif
        }
    },
    computed: {
        headerStyle() {
            return `background-image: ${this.isTop
                ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17346611316764d40b66b65.png")'
                : "none"
                }`;
        },
        styleColor() {
            return `color: ${this.isTop ? "#fff" : "#000 "}`;
        },
    },
    onLoad() {
        // this.checkMemberStatus();
    },
    onShareAppMessage(res) {
        console.log(res, '参数啊啊啊');
        return {
            title: '福尊会员注册', // Custom share title
            imageUrl: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17346611426764d416022b9.png', // Custom share image URL
        };
    }, 

    
    methods: {
        onNicknameChange(e) {
            this.formData.nickname = e.detail.value;
            uni.showToast({
                title: '昵称已更新',
                icon: 'success',
                duration: 1000
            });
        },

        //点击授权获取手机号
        async getWxPhoneNumber(e) {
            console.log('getWxPhoneNumber', e)
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                this.getUserPhone({
                    new_phone: 1,
                    iv: e.detail.iv,
                    code: e.detail.code,
                    appId: getApp().globalData.XcxData.appid,
                    verify_vip: 0,
                }, e);
            } else {
                uni.showToast({
                    title: '您已拒绝授权手机号',
                    icon: 'none',
                    duration: 1000,
                    mask: false
                });
            }
        },

        // 获取用户手机号
        async getUserPhone(data, e) {

            const res = await this.$request('SmallProgramApi/Vip/getPhone', data);
            if (res.status == 1) {
                console.log(res, 'res')
                this.formData.phone = res.data.phoneNumber
                uni.showToast({
                    title: '手机号获取成功',
                    icon: 'success',
                    duration: 1000
                })
            } else {
                uni.showToast({
                    title: '获取手机号失败',
                    icon: 'none',
                    duration: 1000
                })
            }
        },

        getVerificationCode() {
            if (this.counting > 0) return

            if (!this.formData.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }

            if (!/^1[3456789]\d{9}$/.test(this.formData.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                })
                return
            }


            // 开始倒计时
            this.counting = 60
            this.timer = setInterval(() => {
                if (this.counting > 0) {
                    this.counting--
                } else {
                    clearInterval(this.timer)
                }
            }, 1000)

            uni.showToast({
                title: '验证码已发送',
                icon: 'success'
            })
        },

        async submitForm() {
            // if (!this.formData.name) {
            //     uni.showToast({
            //         title: '请输入昵称',
            //         icon: 'none'
            //     })
            //     return
            // }


            if (!this.formData.nickname) {
                uni.showToast({
                    title: '请输入昵称',
                    icon: 'none'
                })
                return
            }

            if (!this.formData.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }

            // if (!this.formData.phone || !this.formData.password) {
            //     uni.showToast({
            //         title: '请填写完整信息',
            //         icon: 'none'
            //     })
            //     return
            // }

            // if (!this.formData.confirmationCode) {
            //     uni.showToast({
            //         title: '请确认密码',
            //         icon: 'none'
            //     })
            //     return
            // }

            // if (this.formData.password !== this.formData.confirmationCode) {
            //     uni.showToast({
            //         title: '两次密码输入不一致',
            //         icon: 'none'
            //     })
            //     return
            // }

            // 如果头像有更改，先上传头像
            // if (this.changeAvatar) {
            //     try {
            //         const res = await upload({
            //             url: '/SmallProgramApi/Image/uploadAvatar',
            //             path: this.formData.avatar,
            //             name: 'avatar',
            //         }, true);
            //         this.formData.avatar = res.data.path;
            //         this.changeAvatar = false;
            //     } catch (error) {
            //         uni.showToast({
            //             title: '头像上传失败',
            //             icon: 'none'
            //         });
            //         return;
            //     }
            // }

            const result = await this.$request('SmallProgramApi/Register/registerVip_v2', {
                // name: this.formData.name,
                // avatar: this.formData.avatar,
                nickname: this.formData.nickname,
                // confirm_password: this.formData.confirmationCode,
                // password: this.formData.password,
                phone: this.formData.phone,
            })

            if (result.status == 1) {
                uni.showToast({
                    title: result.msg,
                    icon: 'success'
                })
                this.isFormVisible = false
                // 调用登录方法并跳转到首页
                getApp().globalData.userLogin(async () => {
                    // 等待一下确保store更新完成
                    uni.navigateTo({
                        url: '/pages/mer/tabbar/home/home'
                    });
                });
            } else {
                uni.showToast({
                    title: result.msg,
                    icon: 'none'
                })
            }
        },

        cancel() {
            this.isFormVisible = !this.isFormVisible;
            setTimeout(() => {
                uni.navigateTo({
                        url: '/pages/mer/tabbar/home/home'
                    });
            }, 300);
        },
        chooseAvatar(e) {
            console.log('chooseAvatar', e)
            this.changeAvatar = true;
            this.formData.avatar = e.detail.avatarUrl;
        },
        checkMemberStatus() {
            const vid = this.$store.userInfo?.vid;
            if (vid > 0) {
                let countdown = 3;
     
                
                this.timer = setInterval(() => {
                    countdown--;
                    if (countdown > 0) {
                        // 更新提示内容
                        uni.showModal({
                            title: '提示',
                            content: `您已是会员，${countdown}秒后返回首页...`,
                            showCancel: false
                        });
                    } else {
                        clearInterval(this.timer);
                        uni.redirectTo({
                            url: '/pages/mer/tabbar/home/home'
                        });
                    }
                }, 1000);
            }
        },
    
    },
    onUnload() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
}
</script>

<style lang="scss">
page {
    background: #ffffff;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: calc(102rpx + 44px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ffffff;
}

// 普通屏幕的体查询（非刘海屏）
@media screen and (device-width: 375px) and (device-height: 667px),
/* iPhone 6/7/8 */
screen and (device-width: 414px) and (device-height: 736px),
/* iPhone 6/7/8 Plus */
screen and (device-width: 360px) and (device-height: 640px)
/* 常见安卓机型 */
    {
    .login-page {
        margin-top: 102rpx; // 普通屏幕只需要导航栏高度
    }

    .fixed-header {
        height: 102rpx;
        padding-top: 0;
    }
}

.search-box {
    height: 102rpx;
    // padding: 12rpx 24rpx;
    // box-sizing: border-box;
    // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
    z-index: 1;

    .search-content {
        height: 64rpx;
        width: 448rpx;
        padding: 0 0 0 24rpx;
        border: 2rpx solid var(--primary-color);
        border-radius: 34rpx;
        box-sizing: border-box;
        background-color: #ffffff;

        .search-icon {
            font-size: 28rpx;
            color: #999999;
        }

        .search-input {
            flex: 1;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #333333;
            margin: 0 10rpx;
            height: 48rpx;
        }

        .search-btn {
            width: 124rpx;
            height: 100%;
            font-size: 28rpx;
            color: #ffffff;
            text-align: center;
            line-height: 48rpx;
            // background-color: var(--primary-color);
            border-radius: 32rpx;
            margin-right: -1rpx;
        }
    }
}

.login-page {
    display: flex;
    flex-direction: column;
    margin-top: calc(102rpx + 44px);
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17346611426764d416022b9.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;

    .formData-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 180rpx;
        background-color: #fff;
        border-radius: 24rpx;
        transform: translateY(0);
        transition: transform 0.3s ease-out;
        margin: 0 20rpx;
        box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.1);

        &.hidden {
            transform: translateY(100%);
        }
    }

    .login-formData {
        padding: 30rpx;
        border-radius: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .formData-item-border{
            border-bottom: 1px solid #eeeeee;
           } 

        .formData-item {
            position: relative;
            padding: 10rpx 0;
          
            &.verification-item {
                display: flex;
                align-items: center;
                height: 88rpx;

                .label {
                    width: 140rpx;
                    margin-bottom: 0;
                }

                input {
                    flex: 1;
                    padding: 0;
                    margin: 0;
                }

                .verify-btn {
                    width: 160rpx;
                    text-align: center;
                    color: #ff9500;
                    flex-shrink: 0;
                }
            }

            .label {
                font-size: 28rpx;
                color: #333;
            }

            input {
                height: 88rpx;
                line-height: 88rpx;
                font-size: 28rpx;
                border: none;
                background: transparent;

                &::placeholder {
                    color: #999;
                }
            }

            .input-with-button {
                display: flex;
                align-items: center;
                height: 88rpx;

                .label {
                    width: 140rpx;
                    margin-bottom: 0;
                    flex-shrink: 0;
                }

                input {
                    flex: 1;
                    padding: 0;
                    margin: 0;
                }

            }

            &.avatar-item {
                display: flex;
                align-items: center;

                .label {
                    width: 140rpx;
                    margin-bottom: 0;
                }

                .avatar-wrapper {
                    position: relative;
                    width: 120rpx;
                    height: 120rpx;

                    .avatar {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }

                    .formData-list-button {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        z-index: 1;
                        padding: 0;
                        margin: 0;

                        &::after {
                            border: none;
                        }
                    }
                }
            }

            &.nickname-item {
                display: flex;
                align-items: center;
                height: 88rpx;

                .label {
                    width: 140rpx;
                    margin-bottom: 0;
                }

                input {
                    flex: 1;
                    padding: 0;
                    margin: 0;
                }
            }
        }
    }

    .button-group {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40rpx 30rpx;
        display: flex;
        justify-content: space-between;
        gap: 20rpx;
        background-color: #fff;
        z-index: 1;
        box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
    }

    .btn {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 44rpx;
        font-size: 32rpx;
        border: none;

        &::after {
            border: none;
        }

        &.cancel {
            background: #f5f5f5;
            color: #666;
        }

        &.submit {
            background: #ff9500;
            color: #fff;
        }
    }

    .auth-button {
        color: gray;
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
        margin-left: 20rpx;
        border: none;
        line-height: 1.5;
        height: auto;
        flex-shrink: 0;

        &::after {
            border: none;
        }

        &:active {
            opacity: 0.8;
        }
    }
}
</style>